<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 本框架基本脚本和样式 -->
<script type="text/javascript"
	src="${path }/resource/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/MBase.js"></script>
<style type="text/css">
.board-head-1 {
	background: #fff;
	height: 45px;
	width: 100%;
	position: fixed;
}

.board-head-c {
	float: left;
	text-align: center;
	line-height: 40px;
	font-size: 18px;
	width: 100%;
}

.board-head-r {
	float: right;
	line-height: 40px;
	font-size: 18px;
	margin-right: 30px;
}
.board-app{
	top: 50px;
    position: absolute;
    padding: 10px;
    overflow: scroll;
    }
 .clo{
 	width: 3000px;
 	float: left;
 }
 
.clo-title{
	
	height: 44px;
	line-height: 44px;
	font-size: 16px;
	text-align: center;
	background: #fff;
	float:left;
	width:250px;
	border-right: 1px solid #c0ccda;
    border-bottom: 1px solid #c0ccda;
        
}
.clo-body{
	padding:10px;
	padding-bottom:0px;
	font-size: 14px;
	text-align: left;
	float:left;
	width:250px;
	border-right: 1px solid #c0ccda;
    border-bottom: 1px solid #c0ccda;
    height: 200px;
     overflow: scroll;
     overflow-x:hidden
}
.clo-name{
	background: #fff;
}
.card{
	background: #fff;
    position: relative;
    padding: 10px 10px 10px 12px;
    margin-bottom: 5px;
    border: 1px solid transparent;
    box-shadow: 0 1px 8px 0 rgba(0,0,0,.2);
    cursor: pointer;
    transition: .3s;
    border-left: 1px solid #20a0ff;
    min-height: 50px;
}
.clo-man{
	height: 100%;
}
.clean{
clear: both;}
</style>
</head>
<body class="gray-bg">
	<div class="board-head-1">

		<div class="board-head-c">阿里先锋
		
		<div class="board-head-r">
			<i class="fa fa-plush"></i> 计划
		</div>
		</div>
		
	</div>


	<div id="board-app" class="board-app">
	
	<div class="clo" >
			<div class="clo-title ">处理人</div>
			<div  class="clo-title"  v-for="lane in laneTitle" >{{lane.name}}</div>
	</div>
	
	<template v-for="(man,y) in laneMan" >
	<div class="clo" >
		
		<div class="clo-body clo-name clo-man"   >
				{{man.name}}({{man.count}})
		</div>
		
		
		<div class="clo-body" v-for="(lane,x) in laneTitle" @drop="drop(event,x,y)"   @dragover="allowDrop(event)" >
			<div class="card" v-for="(card,z) in cards[x][y]" @dragstart="drag(event,x,y,z,card.id)"  draggable="true" > 
			 	<div>编号:{{card.id}}</div>
			 <p> {{card.title}} </p>
			</div>	
		</div>
	</div>
	</template>
	
	
	
	
			
	
	</div>
	 
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script type="text/javascript">
	
	
	
		var app = new Vue({
			el : '#board-app',
			data : {
				
				//泳道
				laneTitle : [
					{name:'待办',count:1,id:2},
					{name:'开发中',count:3,id:3},
					{name:'开发完成',count:2,id:4},
					{name:'测试中',count:2,id:5},
					{name:'测试完成',count:2,id:6},
				],
				//人
				laneMan:[
					{name:'jack',count:23,id:1},
					{name:'Annar',count:2,id:2},
					{name:'Annar1',count:2,id:2},
					{name:'Annar2',count:2,id:2},
					{name:'Annar3',count:2,id:2},
				],
				//卡片
				cards: [
						//泳道  x
						[	
							//人  y
							[{id:23,title:'创建一个新的一个新的一个新的一个新的一个新的地标'}, {id:23,title:'构建qq登录'}],//0,0
							[{id:23,title:'创建一个新的一个新的一个新的一个新的一个新的地标'}, {id:23,title:'构建qq登录'}],//0,0
							[{id:23,title:'创建一个新的一个新的一个新的一个新的一个新的地标'}, {id:23,title:'构建qq登录'}],//0,0
							[{id:23,title:'创建一个新的一个新的一个新的一个新的一个新的地标'}, {id:23,title:'构建qq登录'}],//0,0
							[{id:23,title:'打扫房间'},{id:23,title:'拖地机器人'},{id:23,title:'打扫房间'},{id:23,title:'拖地机器人'},{id:23,title:'打扫房间'},{id:23,title:'拖地机器人'},{id:23,title:'打扫房间'},{id:23,title:'拖地机器人'}]//0,1
						],
						[	
							//人  y
							[{id:23,title:'创建一个新的一个新的一个新的一个新的一个新的地标'}, {id:23,title:'构建qq登录'}],//0,0
							[{id:23,title:'创建一个新的一个新的一个新的一个新的一个新的地标'}, {id:23,title:'构建qq登录'}],//0,0
							[{id:23,title:'创建一个新的一个新的一个新的一个新的一个新的地标'}, {id:23,title:'构建qq登录'}],//0,0
							[{id:23,title:'创建一个新的一个新的一个新的一个新的一个新的地标'}, {id:23,title:'构建qq登录'}],//0,0
							[]//0,1
						],
						[	
							//人  y
							[{id:23,title:'创建一个新的一个新的一个新的一个新的一个新的地标'}, {id:23,title:'构建qq登录'}],//0,0
							[{id:23,title:'创建一个新的一个新的一个新的一个新的一个新的地标'}, {id:23,title:'构建qq登录'}],//0,0
							[{id:23,title:'创建一个新的一个新的一个新的一个新的一个新的地标'}, {id:23,title:'构建qq登录'}],//0,0
							[{id:23,title:'创建一个新的一个新的一个新的一个新的一个新的地标'}, {id:23,title:'构建qq登录'}],//0,0
							[]//0,1
						],
						[	
							//人  y
							[{id:23,title:'创建一个新的一个新的一个新的一个新的一个新的地标'}, {id:23,title:'构建qq登录'}],//0,0
							[{id:23,title:'创建一个新的一个新的一个新的一个新的一个新的地标'}, {id:23,title:'构建qq登录'}],//0,0
							[{id:23,title:'创建一个新的一个新的一个新的一个新的一个新的地标'}, {id:23,title:'构建qq登录'}],//0,0
							[{id:23,title:'创建一个新的一个新的一个新的一个新的一个新的地标'}, {id:23,title:'构建qq登录'}],//0,0
							[]//0,1
						],
						[	
							//人  y
							[{id:23,title:'创建一个新的一个新的一个新的一个新的一个新的地标'}, {id:23,title:'构建qq登录'}],//0,0
							[{id:23,title:'创建一个新的一个新的一个新的一个新的一个新的地标'}, {id:23,title:'构建qq登录'}],//0,0
							[{id:23,title:'创建一个新的一个新的一个新的一个新的一个新的地标'}, {id:23,title:'构建qq登录'}],//0,0
							[{id:23,title:'创建一个新的一个新的一个新的一个新的一个新的地标'}, {id:23,title:'构建qq登录'}],//0,0
							[]//0,1
						]
						 
					],
					point:{},
				},
				methods:{
					drag:function(ev,x,y,z,id){
						var point={x:x,y:y,z:z,id:id};
						console.log(point);
						this.point=point;
					},
					allowDrop:function(ev){
						ev.preventDefault();
					},
					drop:function (ev,x,y){
						ev.preventDefault();
						var point=this.point;
						console.log(point);
						
						var card=this.cards[point.x][point.y][point.z];
						this.cards[x][y].push(card);
						this.cards[point.x][point.y].splice(point.z, 1);
						//ev.target.appendChild(document.getElementById(data));
					},
					//加载任务数据
					function loadData(){
						
					}
		
				}
		})
	</script>
</body>
</html>
